<template>
  <section id="projects" class="projects">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">精选项目</h2>
        <p class="section-subtitle">
          展示我在前端开发领域的专业技能和创新思维
        </p>
      </div>

      <div class="projects-filter">
        <div class="filter-tabs">
          <button
            v-for="category in projectCategories"
            :key="category.id"
            class="filter-tab"
            :class="{ 'filter-tab-active': activeCategory === category.id }"
            @click="filterProjects(category.id)"
          >
            {{ category.name }}
          </button>
        </div>
      </div>

      <div class="projects-grid">
        <div
          v-for="project in filteredProjects"
          :key="project.id"
          class="project-card"
          :class="{ 'project-card-featured': project.featured }"
          @mouseenter="hoverProject = project.id"
          @mouseleave="hoverProject = null"
        >
          <div class="project-image">
            <div class="project-image-container">
              <img
                :src="project.image"
                :alt="project.title"
                class="project-img"
                loading="lazy"
              />
              <div class="project-overlay">
                <div class="project-links">
                  <a
                    v-if="project.demoUrl"
                    :href="project.demoUrl"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="project-link demo-link"
                  >
                    <EyeOutlined />
                    演示
                  </a>
                  <a
                    v-if="project.githubUrl"
                    :href="project.githubUrl"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="project-link github-link"
                  >
                    <GithubOutlined />
                    代码
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="project-content">
            <div class="project-header">
              <h3 class="project-title">{{ project.title }}</h3>
              <div v-if="project.featured" class="project-badge">
                <StarOutlined /> 精选
              </div>
            </div>

            <p class="project-description">{{ project.description }}</p>

            <div class="project-tech">
              <span
                v-for="tech in project.technologies"
                :key="tech"
                class="tech-tag"
                :style="{ backgroundColor: getTechColor(tech) }"
              >
                {{ tech }}
              </span>
            </div>

            <div class="project-features">
              <ul class="features-list">
                <li v-for="feature in project.features.slice(0, 3)" :key="feature">
                  <CheckCircleOutlined />
                  {{ feature }}
                </li>
              </ul>
            </div>

            <div class="project-stats">
              <div class="stat">
                <CalendarOutlined />
                <span>{{ project.duration }}</span>
              </div>
              <div class="stat">
                <TeamOutlined />
                <span>{{ project.teamSize }}</span>
              </div>
              <div class="stat">
                <StarOutlined />
                <span>{{ project.rating }}/5</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="projects-cta">
        <p class="cta-text">想要了解更多项目详情？</p>
        <a-button
          type="primary"
          size="large"
          class="cta-button"
          @click="showAllProjects = !showAllProjects"
        >
          {{ showAllProjects ? '显示精选项目' : '查看所有项目' }}
          <template #icon><AppstoreOutlined /></template>
        </a-button>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { EyeOutlined, GithubOutlined, StarOutlined, CheckCircleOutlined, CalendarOutlined, TeamOutlined, AppstoreOutlined } from '@ant-design/icons-vue'

interface Project {
  id: number
  title: string
  description: string
  image: string
  category: string
  technologies: string[]
  features: string[]
  demoUrl?: string
  githubUrl?: string
  featured: boolean
  duration: string
  teamSize: string
  rating: number
}

interface Category {
  id: string
  name: string
}

const techColors: Record<string, string> = {
  'Vue.js': '#4FC08D',
  'TypeScript': '#3178C6',
  'Ant Design Vue': '#1890FF',
  'Pinia': '#FFD700',
  'Vite': '#646CFF',
  'Node.js': '#339933',
  'Express': '#000000',
  'MongoDB': '#47A248',
  'MySQL': '#4479A1',
  'React': '#61DAFB',
  'Next.js': '#000000',
  'Tailwind CSS': '#06B6D4',
  'JavaScript': '#F7DF1E',
  'CSS3': '#1572B6',
  'HTML5': '#E34F26'
}

const activeCategory = ref('all')
const hoverProject = ref<number | null>(null)
const showAllProjects = ref(false)

const projectCategories: Category[] = [
  { id: 'all', name: '全部' },
  { id: 'web', name: 'Web应用' },
  { id: 'mobile', name: '移动端' },
  { id: 'dashboard', name: '数据可视化' },
  { id: 'ecommerce', name: '电商平台' }
]

const projects: Project[] = [
  {
    id: 1,
    title: '智能数据可视化平台',
    description: '基于Vue3和ECharts的企业级数据可视化平台，支持多种图表类型和实时数据更新，帮助企业更好地理解业务数据。',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop',
    category: 'dashboard',
    technologies: ['Vue.js', 'TypeScript', 'Ant Design Vue', 'ECharts', 'Pinia'],
    features: [
      '支持15+种图表类型',
      '实时数据更新',
      '拖拽式仪表板构建',
      '数据导出功能',
      '响应式设计'
    ],
    demoUrl: 'https://example.com/demo1',
    githubUrl: 'https://github.com/example/project1',
    featured: true,
    duration: '3个月',
    teamSize: '3人团队',
    rating: 4.8
  },
  {
    id: 2,
    title: '移动端电商平台',
    description: '功能完善的移动端电商应用，包含商品展示、购物车、支付、订单管理等完整功能，采用PWA技术提供原生应用体验。',
    image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800&h=600&fit=crop',
    category: 'ecommerce',
    technologies: ['Vue.js', 'Vite', 'PWA', 'Pinia', 'Ant Design Vue'],
    features: [
      'PWA离线支持',
      '支付宝/微信支付集成',
      '商品搜索和筛选',
      '用户评价系统',
      '物流跟踪'
    ],
    demoUrl: 'https://example.com/demo2',
    githubUrl: 'https://github.com/example/project2',
    featured: true,
    duration: '4个月',
    teamSize: '5人团队',
    rating: 4.9
  },
  {
    id: 3,
    title: '企业管理系统',
    description: '现代化的企业管理系统，包含用户管理、权限控制、工作流引擎等模块，支持多租户架构和自定义表单。',
    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop',
    category: 'web',
    technologies: ['Vue.js', 'TypeScript', 'Node.js', 'MongoDB', 'Express'],
    features: [
      'RBAC权限管理',
      '可视化工作流设计器',
      '自定义表单构建',
      '数据权限控制',
      '操作日志审计'
    ],
    demoUrl: 'https://example.com/demo3',
    githubUrl: 'https://github.com/example/project3',
    featured: false,
    duration: '6个月',
    teamSize: '4人团队',
    rating: 4.7
  },
  {
    id: 4,
    title: '在线教育平台',
    description: '功能丰富的在线教育平台，支持直播授课、录播课程、作业管理、在线考试等功能，为教育机构提供完整的解决方案。',
    image: 'https://images.unsplash.com/photo-1501504905252-473c47e087f8?w=800&h=600&fit=crop',
    category: 'web',
    technologies: ['Vue.js', 'TypeScript', 'WebRTC', 'Socket.io', 'MySQL'],
    features: [
      '实时直播授课',
      '屏幕共享',
      '在线白板',
      '作业批改系统',
      '学习进度跟踪'
    ],
    demoUrl: 'https://example.com/demo4',
    githubUrl: 'https://github.com/example/project4',
    featured: false,
    duration: '5个月',
    teamSize: '6人团队',
    rating: 4.6
  },
  {
    id: 5,
    title: '社交媒体应用',
    description: '现代化的社交媒体应用，支持发布动态、即时聊天、好友管理、内容推荐等功能，采用微服务架构设计。',
    image: 'https://images.unsplash.com/photo-1611162617474-5b21e879e113?w=800&h=600&fit=crop',
    category: 'mobile',
    technologies: ['Vue.js', 'React', 'Node.js', 'Redis', 'MongoDB'],
    features: [
      '实时消息推送',
      '智能内容推荐',
      '图片/视频分享',
      '位置服务集成',
      '隐私保护机制'
    ],
    demoUrl: 'https://example.com/demo5',
    githubUrl: 'https://github.com/example/project5',
    featured: false,
    duration: '4个月',
    teamSize: '7人团队',
    rating: 4.5
  },
  {
    id: 6,
    title: '任务管理工具',
    description: '简洁高效的任务管理工具，支持团队协作、甘特图、看板视图、时间追踪等功能，帮助团队提高工作效率。',
    image: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=800&h=600&fit=crop',
    category: 'web',
    technologies: ['Vue.js', 'TypeScript', 'Ant Design Vue', 'Pinia', 'Vite'],
    features: [
      '看板视图',
      '甘特图',
      '团队协作',
      '时间追踪',
      '文件共享'
    ],
    demoUrl: 'https://example.com/demo6',
    githubUrl: 'https://github.com/example/project6',
    featured: false,
    duration: '2个月',
    teamSize: '2人团队',
    rating: 4.4
  }
]

const filteredProjects = computed(() => {
  let filtered = projects

  if (activeCategory.value !== 'all') {
    filtered = filtered.filter(project => project.category === activeCategory.value)
  }

  if (!showAllProjects.value) {
    filtered = filtered.filter(project => project.featured)
  }

  return filtered
})

const filterProjects = (category: string) => {
  activeCategory.value = category
}

const getTechColor = (tech: string): string => {
  return techColors[tech] || '#667eea'
}
</script>

<style scoped>
.projects {
  padding: 6rem 0;
  background: var(--bg-secondary);
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

.projects-filter {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.filter-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.filter-tab {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-tab:hover {
  color: var(--primary-color);
  background: rgba(102, 126, 234, 0.1);
}

.filter-tab-active {
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.project-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.project-card-featured {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #667eea 0%, #764ba2 100%) border-box;
}

.project-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.project-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.project-card:hover .project-img {
  transform: scale(1.1);
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-links {
  display: flex;
  gap: 1rem;
}

.project-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.demo-link {
  background: white;
  color: var(--primary-color);
}

.demo-link:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

.github-link {
  background: #24292e;
  color: white;
}

.github-link:hover {
  background: #1a1e22;
  transform: translateY(-2px);
}

.project-content {
  padding: 2rem;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.project-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.project-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

.project-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tech-tag {
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  color: white;
  backdrop-filter: blur(10px);
}

.project-features {
  margin-bottom: 1.5rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.features-list li svg {
  color: #52c41a;
  font-size: 1rem;
}

.project-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.projects-cta {
  text-align: center;
  margin-top: 3rem;
}

.cta-text {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.cta-button {
  min-width: 200px;
  height: 50px;
  font-size: 1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1rem;
  }

  .project-content {
    padding: 1.5rem;
  }

  .section-title {
    font-size: 2rem;
  }
}
</style>